<template>
  <div>
    <div class="main-re">
      <div class="main-left">
        <DjRadioDetailHeader :RadioDetail="RadioDetail"></DjRadioDetailHeader>
        <div class="n-songtb">

          <div class="tlt">
            <h3>节目列表</h3>
            <span class="sub">共{{ count }}期</span>
            <div class="out-list">
              <i class="u-icn"></i>
              <a href="#">生成外链播放器</a>
            </div>
          </div>
          <table class="m-table">
            <tbody>
            <tr v-for="(item,index) in UserRadioList" :key="index">
              <td class="filst" style="width: 12%;">
                <div class="hd">
                  <span class="num-hd">{{ index + 1 }}</span>
                  <span class="bg-img" @click="addList(item)"></span>
                </div>
              </td>
              <td class="rank" style="width: 37.5%;">
                <div class="f-cb">
                  <router-link :to="{name:'ProgramDetail',query:{id:item.id}}" :title="item.name">
                    {{ item.name }}
                  </router-link>
                </div>
                <div class="oper">
                  <a href="javascript:;" title="添加到播放列表" @click.prevent="addSongList(item)"></a>
                  <span class=" u-icn-81" title="分享">分享</span>
                  <span class=" s-bg-12" title="下载">下载</span>
                </div>
              </td>
              <td class="s-fc3" style="width: 12.5%;">
                <span class="u-dur">播放{{ item.listenerCount }}</span>
              </td>
              <td class="singer" style="width: 14%;">
      <span class="text">
        <a style="cursor: text;text-decoration: none">赞{{ item.likedCount }}</a>
      </span>
              </td>
              <td class="s-fc3" style="width: 13.5%;">
                <span class="u-dur">{{ formatDate(item.createTime) }}</span>
              </td>
              <td class="singer" style="width: 9.5%;">
      <span class="text">
        <a style="cursor: text;text-decoration: none">{{ voiceDuration(item.duration) }}</a>
      </span>
              </td>
            </tr>
            </tbody>
          </table>
        </div>

      </div>
      <div class="main-right">
        <div class="g-wrap7">
          <h3 class="u-hd4">你可能也喜欢
          </h3>
          <ul class="m-rctlist">
            <li v-for="(item,index) in hotList" :key="index">
              <div class="cver">
                <img alt="" v-lazy="item.picUrl">
                <router-link :to="{name:'DjRadioDetail',query:{id:item.id}}" class="cver-a" :title="item.name"></router-link>
              </div>
              <div class="info">
                <p class="cver-title">
                  <router-link :title="item.name" :to="{name:'DjRadioDetail',query:{id:item.id}}">
                    {{item.name}}
                  </router-link>
                </p>
                <p class="cver-name">
                  <span>by</span><router-link :to="{name:'UserDetail',params:{id:item.dj.userId}}" class="cver-name-a" >{{item.dj.nickname}}</router-link>
                </p>
              </div>
            </li>
          </ul>
          <h3 class="u-hd5">网易云音乐多端下载</h3>
          <ul class="m-multi">
            <li>
              <a href="#">
                iPhone
              </a>
            </li>
            <li>
              <a href="#">PC</a>
            </li>
            <li>
              <a href="#">Android</a>
            </li>
          </ul>
          <p class="mu-p">同步歌单，随时畅听320k好音乐</p>
        </div>
      </div>
    </div>

  </div>
</template>

<script>
import DjRadioDetailHeader from "@/views/DjRadioDetail/DjRadioDetailHeader";
import {formatDate} from "@/utils/formatDate";
import {voiceDuration} from "@/utils/voiceDuration";
import {reqHotRadio} from "@/http/api";

export default {
  name: "index",
  data() {
    return {
      RadioDetail: {},
      UserRadioList: [],
      count: '',
      formatDate: formatDate,
      voiceDuration: voiceDuration,
      hotList: []
    }
  },
  components: {
    DjRadioDetailHeader
  },
  methods: {
    addSongList(i){
      let id = i.mainTrackId
      i.id = id
      this.$store.commit('track/ADDMUSICLIST',i)
    },
    addList(i){
      let id = i.mainTrackId
      i.id = id
      this.$store.commit('track/SETMUSIC',i)
    },
    async getRadio() {
      let result = await this.$API.reqHotRadio()
      this.hotList = result.data.djRadios.slice(0,5)
    },
    async getRadioDetail() {
      let result = await this.$API.reqRadioDetail(this.$route.query.id)
      this.RadioDetail = result.data.data
    },
    async getUserRadioList() {
      let result = await this.$API.reqUserRadioList(this.$route.query.id)
      this.UserRadioList = result.data.programs
      this.count = result.data.count
    }
  },
  mounted() {
    this.getRadioDetail()
    this.getUserRadioList()
    this.getRadio()
  }
}
</script>

<style scoped lang="less">
.main-re {
  width: 982px;
  margin: 0 auto;
  height: 100%;
  overflow: hidden;
  border: 1px solid #D3D3D3;

  .main-left {
    width: 710px;
    float: left;
    border-right: 1px solid #D3D3D3;

    .n-songtb {
      padding-top: 20px;
      padding-bottom: 40px;

      .tlt {
        width: 640px;
        height: 35px;
        margin: 0 auto;
        border-bottom: 2px solid #c20c0c;

        .out-list {
          width: 100px;
          height: 16px;
          float: right;
          display: flex;
          align-items: center;
          margin-top: 10px;

          .u-icn {
            width: 16px;
            height: 16px;
            display: inline-block;
            background-image: url("../../assets/icon.png");
            background-position: -34px -863px;
          }

          a {
            color: #4996d1;
            text-decoration: underline;
          }
        }

        h3 {
          font-family: "Microsoft Yahei", Arial, Helvetica, sans-serif;
          font-size: 20px;
          line-height: 28px;
          font-weight: normal;
          color: #333;
          float: left;
        }

        .sub {
          margin: 9px 0 0 20px;
          float: left;
          color: #666;
          font-size: 12px;
          font-family: Arial, Helvetica, sans-serif;
          -webkit-text-size-adjust: none;
        }

        .more {
          margin-top: 9px;
          height: 16px;
          float: right;

          .fc {
            color: #c20c0c;
            font-weight: bold;
          }
        }
      }

      .m-table {
        width: 640px;
        margin: 0 auto;

        border-bottom: 1px solid #D9D9D9;
        border-left: 1px solid #D9D9D9;
        border-right: 1px solid #D9D9D9;

        tr {
          width: 100%;
          vertical-align: inherit;
          font-weight: bold;
          text-align: -internal-center;

        }

        tbody {
          tr:nth-child(even) {
            background-color: #F7F7F7;
          }

          tr {
            height: 55px;

            &:hover {
              background-color: #E6E6E6;
            }

            &:hover .oper {
              display: block !important;
            }

            &:hover .rank .f-cb {
              float: left;
              width: 76%;
            }

            td {
              height: 30px;
            }

            .filst {
              .hd {
                height: 18px;


                .num-hd {
                  color: #666;
                  width: 25px;
                  height: 18px;
                  display: inline-block;
                  font-weight: normal;
                  float: left;
                  line-height: 18px;
                  margin-left: 15px;
                  margin-right: 10px;
                }

                .bg-img {
                  float: left;
                  display: inline-block;
                  width: 17px;
                  height: 17px;
                  background: url("../../assets/table.png") no-repeat 0 -103px;
                  &:hover{
                    background-position: -0px -128px;
                    cursor: pointer;
                  }
                }
              }
            }

            .rank {
              padding-top: 10px;
              padding-bottom: 10px;

              .oper {
                display: none;
                float: left;

                a {
                  width: 13px;
                  height: 13px;
                  float: left;
                  margin-top: 2px;
                  display: inline-block;

                  background: url("../../assets/icon.png") no-repeat 0 -700px;
                  &:hover{
                    background-position: -22px -700px;
                  }

                }

                .u-icn-81 {
                  float: left;
                  width: 18px;
                  height: 16px;
                  margin: 2px 0 0 4px;
                  overflow: hidden;
                  text-indent: -999px;
                  cursor: pointer;
                  background: url("../../assets/table.png") no-repeat 0 -195px;
                  &:hover{
                    background-position: -20px -195px;
                  }
                }

                .s-bg-12 {
                  float: left;
                  width: 18px;
                  height: 16px;
                  margin: 2px 0 0 4px;
                  overflow: hidden;
                  text-indent: -999px;
                  cursor: pointer;
                  background: url("../../assets/table.png") no-repeat -81px -174px;
                  &:hover{
                    background-position: -104px -174px;
                  }
                }
              }

              .f-cb {
                max-width: 92%;
                display: flex;
                align-content: center;

                a {
                  color: #666;
                  white-space: nowrap;
                  overflow: hidden;
                  text-overflow: ellipsis;
                  font-weight: normal;
                }

                .texe {
                  margin-left: 10px;
                  display: flex;
                  align-items: center;
                  justify-content: center;

                  .icon-img {
                    display: inline-block;
                    width: 17px;
                    height: 17px;
                    background: url("../../assets/table.png") no-repeat -20px -128px;
                  }

                  .txt {
                    a {
                      color: #333;
                      font-weight: normal;
                    }
                  }
                }

                a {

                  .img-data {
                    width: 50px;
                    height: 50px;
                  }
                }

              }
            }

            .s-fc3 {


              .u-dur {
                color: #666;
                margin-left: 5px;
                font-weight: normal;
              }
            }

            .singer {
              overflow: hidden;
              white-space: nowrap;
              text-overflow: ellipsis;

              .text {
                a {
                  color: #666;
                  margin-left: 5px;
                  font-weight: normal;
                }
              }

              .album {

                margin-left: 5px;

                a {
                  color: #666;
                  font-weight: normal;

                }
              }
            }
          }
        }
      }
    }
  }

  .main-right {
    width: 270px;
    height: 800px;
    float: right;

    .g-wrap7 {
      padding: 20px 40px 40px 30px;

      .u-hd3 {
        height: 23px;
        margin-bottom: 20px;
        border-bottom: 1px solid #ccc;
      }

      .m-piclist {
        height: auto;
        overflow: hidden;
        margin-left: -13px;
        padding-bottom: 25px;

        li {
          width: 53px;
          height: 53px;
          display: inline;
          float: left;
          padding: 0 0 13px 13px;

          a {
            width: 40px;
            height: 40px;

            img {
              width: 40px;
              height: 40px;
            }
          }
        }
      }

      .u-hd4 {
        height: 23px;
        margin-bottom: 20px;
        border-bottom: 1px solid #ccc;
      }

      .m-rctlist {
        overflow: hidden;
        height: auto;

        li {
          float: left;
          width: 200px;
          height: 50px;
          margin-bottom: 15px;
          line-height: 24px;

          .cver {
            float: left;
            width: 50px;
            height: 50px;
            position: relative;

            img {
              width: 50px;
              height: 50px;
            }

            .cver-a {
              width: 50px;
              height: 50px;
              position: absolute;
              top: 0;
              left: 0;
              display: inline-block;
            }
          }

          .info {
            float: left;
            margin-left: 10px;
            line-height: 24px;
            width: 140px;

            .cver-title {
              max-width: 100%;

              a {
                font-size: 14px;
                color: #000;
                max-width: 100%;
                display: inline-block;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
              }
            }

            .cver-name {
              margin-top: -7px;
              display: flex;
              align-items: center;
              max-width: 100%;
span{
  float: left;
  margin-right: 5px;
  color: #999;
}
              .cver-name-a {
                color: #666;
                float: left;
                max-width: 100%;
                display: inline-block;
              }

              img {
                width: 13px;
                height: 13px;

              }
            }
          }
        }
      }

      .u-hd5 {
        height: 23px;
        margin-top: 30px;
        margin-bottom: 20px;
        border-bottom: 1px solid #ccc;
      }

      .m-multi {
        height: 65px;
        margin-bottom: 10px;
        background-position: 0 -392px;
        background-image: url("../../assets/sprite.png");

        li {
          float: left;

          &:nth-child(1) {
            a {
              display: block;
              width: 42px;
              height: 48px;
              text-indent: -9999px;
            }
          }

          &:nth-child(2) {
            width: 60px;
            height: 48px;
            margin: 0 26px 0 30px;

            a {
              display: inline-block;
              text-indent: -9999px;
              width: 60px;
              height: 48px;
            }
          }

          &:nth-child(3) {
            a {
              display: block;
              width: 42px;
              height: 48px;
              text-indent: -9999px;
            }
          }
        }
      }

      .mu-p {
        color: #999;
      }
    }
  }
}

</style>